﻿@{
    ViewBag.Title = "Bindings-Control flow";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>

    <ol class="breadcrumb">
        <li><a href="/Home/Home">Home</a></li>
        <li><a href="/KnockoutJs/Introduction">KnockOut JS</a></li>
        <li class="active">Bindings-Control flow</li>
    </ol>

    <div class="bottomspace">
        <h1 class="text-left">Bindings-Control flow</h1>
    </div>
    <div id="foreach" class="bottomspace">
        <h3>The 'foreach' binding</h3>
        <p>
            The foreach binding duplicates a section of markup for each entry in an array, and binds each copy of that
            markup to the corresponding array item. This is especially useful for rendering lists or tables.
            Assuming your array is an observable array, whenever you later add or remove array entries, the binding
            will efficiently update the UI to match - inserting or removing more copies of the markup, without
            affecting any other DOM elements.
        </p>

        <div class="divcolor">
            <pre><code>&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;&lt;th&gt;First name&lt;/th&gt;&lt;th&gt;Last name&lt;/th&gt;&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody data-bind="foreach: people"&gt;
&lt;tr&gt;
&lt;td data-bind="text: firstName"&gt;&lt;/td&gt;
&lt;td data-bind="text: lastName"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
        </div>
        <p>This example uses foreach to produce a read-only table with a row for each array entry</p>
        <div class="divcolor">
            <pre><code>&lt;script type="text/javascript"&gt;
    ko.applyBindings({
        people: [
        { firstName: 'Bert', lastName: 'Bertington' },
        { firstName: 'Charles', lastName: 'Charlesforth' },
        { firstName: 'Denise', lastName: 'Dentiste' }
        ]
    });
&lt;/script&gt;</code></pre>
        </div>
        <a href="#">Live Demo</a>
        <p>
            You can arbitrarily nest any number of foreach bindings along with other control-flow bindings
            such as if and with.
        </p>
        <p>
            <strong>Using foreach without a container element</strong><br />
            In some cases, you might want to duplicate a section of markup, but you don’t have any container
            element on which to put a foreach binding. For example, you might want to generate the following:
        </p>
        <div class="divcolor">
            <pre><code>&lt;ul&gt;
&lt;li class="header"&gt;Header item&lt;/li&gt;
&lt;!-- The following are generated dynamically from an array --&gt;
&lt;li&gt;Item A&lt;/li&gt;
&lt;li&gt;Item B&lt;/li&gt;
&lt;li&gt;Item C&lt;/li&gt;
&lt;/ul&gt;</code></pre>
        </div>
        <p>
            In this example, there isn’t anywhere to put a normal foreach binding. You can’t put it on
            the &lt;ul&gt;
            (because then you’d be duplicating the header item), nor can you put a further container inside
            the
            &lt;ul&gt;
            (because only
            &lt;li&gt;
            elements are allowed inside &lt;ul&gt;
            s).
            To handle this, you can use the containerless control flow syntax, which is based on comment tags. For
            example,
        </p>
        <div class="divcolor">
            <pre><code>&lt;ul&gt;
&lt;li class="header"&gt;Header item&lt;/li&gt;<br />&lt;ko foreach: myItems &gt;
&lt;li&gt;Item &lt;span data-bind="text: $data"&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ko&gt;
&lt;/ul&gt;</code></pre>
        </div>
        <p>Using ko foreach is display myitems values.</p>
        <div class="divcolor">
            <pre><code>&lt;script type="text/javascript"&gt;
    ko.applyBindings({
        myItems: ['A', 'B', 'C']
    });
&lt;/script&gt;</code></pre>
        </div>
        <a href="#">Live Demo</a>
    </div>
    <div class="bottomspace" id="if">
        <h3>The 'if' binding</h3>
        <p>The if binding causes a section of markup to appear in your document (and to have its databind attributes applied), only if a specified expression evaluates to true (or a true-ish value such as a nonnull object or nonempty string).</p>
        <p>
            if plays a similar role to the visible binding. The difference is that, with visible, the contained markup
            always remains in the DOM and always has its data-bind attributes applied - the visible binding just uses
            CSS to toggle the container element’s visiblity. The if binding, however, physically adds or removes the
            contained markup in your DOM, and only applies bindings to descendants if the expression is true.
        </p>
        <h3>Example</h3>
        <div class="divcolor">
            <pre><code>&lt;label&gt;&lt;input type="checkbox" data-bind="checked: displayMessage" /&gt; Display message&lt;/label&gt; 
&lt;div data-bind="if: displayMessage"&gt;Here is a message. Astonishing.&gt;/div&gt;</code></pre>
        </div>
        <p>This example is check first checkbox if checkbox selected then display message.</p>
        <div class="divcolor">
            <pre><code>ko.applyBindings({
displayMessage: ko.observable(false)
});</code></pre>
        </div>
        <a href="#">Live Demo</a>
    </div>
    <div class="bottomspace" id="ifnot">
        <h3>The "ifnot" binding</h3>
        <p>
            The ifnot binding is exactly the same as the if binding, except that it inverts the result of whatever
            expression you pass to it. For more details, see documentation for the if binding.
        </p>
        <p>The following markup:</p>
        <div class="divcolor">
            <pre><code>&lt;div data-bind="ifnot: someProperty"&gt;...&lt;/div&gt;</code></pre>
        </div>
        <p>… is equivalent to the following:</p>
        <div class="divcolor">
            <pre><code>&lt;div data-bind="if: !someProperty()"&gt;...&lt;/div&gt;</code></pre>
        </div>
        <p>
            … assuming that someProperty is observable and hence you need to invoke it as a function to obtain the
            current value.
        </p>
        <p>
            The only reason to use ifnot instead of a negated if is just as a matter of taste: many developers feel that
            it looks tidier.
        </p>

    </div>
    <div class="bottomspace" id="with">
        <h3>The 'with' binding</h3>
        <p>
            The with binding creates a new binding context, so that descendant elements are bound in the context of
            a specified object.
        </p>
        <p>
            Of course, you can arbitrarily nest with bindings along with the other control-flow bindings such
            as if andforeach.
        </p>
        <h3>Example</h3>
        <p>
            Here is a very basic example of switching the binding context to a child object. Notice that in the databindattributes, it is not necessary to prefix latitude or longitude with coords., because the binding context
            is switched to coords.
        </p>
        <div class="divcolor">
            <pre><code>&lt;h1 data-bind="text: city"&gt;&lt;/h1&gt;
&lt;p data-bind="with: coords"&gt;
Latitude: &lt;span data-bind="text: latitude"&gt; &lt;/span&gt;,
Longitude: &lt;span data-bind="text: longitude"&gt; &lt;/span&gt;
&lt;/p&gt;</code></pre>
        </div>
        <p>This example use with binding that bind value of latitude and longitude.</p>
        <div class="divcolor">
            <pre><code>&lt;script type="text/javascript"&gt;<br />ko.applyBindings({<br />city: "London",<br />coords: {<br />latitude: 51.5001524,<br />longitude: -0.1262362<br />}<br />});<br />&lt;/script&gt;</code></pre>
        </div>
        <p>
            Just like other control flow elements such as if and foreach, you can use with without any container
            element to host it. This is useful if you need to use with in a place where it would not be legal to introduce
            a new container element just to hold the with binding. See the documentation for if or foreach for more
            details.
        </p>
        <a href="#">Live Demo</a>
    </div>

</div>